<template>
  <view class="viewport">
    <!-- #ifndef MP-TOUTIAO -->
    <!-- 自定义导航栏 -->
    <uni-nav-bar class="uni-nav-bar" background-color="rgba(255,255,255,0)" :border="false" :statusBar="true"
      @clickLeft="goBack">
      <template #left>
        <view class="icon-arrow-left"></view>
      </template>
      <template #default>
        <view class="title">{{ getBaseTypeName(baseType!) }}精简{{ selectedBase?.questionCount }}题</view>
      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="toutiao-nav-bar">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title">{{ getBaseTypeName(baseType!) }}精简{{ selectedBase?.questionCount }}题</view>
      </view>
    </view>
    <!-- #endif -->
    <scroll-view class="scroll-view" enable-back-to-top scroll-y>
      <!-- 学习-进度 -->
      <view class="panel process-panel ">
        <!-- 标题 -->
        <view class="title">{{ selectedBase?.questionCount }}题完成进度</view>
        <view class="content">
          <view class="process">
            <text class="count"><text class="answer-count">{{ selectedBaseExerciseProcess?.correctCount }}</text>/{{
              selectedBaseExerciseProcess?.count }}</text>
            <text class="tip">全部做对视为完成</text>
          </view>
          <view class="answer-tips">
            <view class="tip-item" @tap="toExerciseNoExerciseQuestions">
              <text class="label">未练题</text>
              <text class="num">{{ selectedBaseExerciseProcess?.noExerciseCount }}</text>
              <uni-icons class="right" type="right" color="#8d8d8d" size="20"
                v-if="(selectedBaseExerciseProcess?.noExerciseCount || 0) <= (selectedBaseExerciseProcess?.count || 0)"></uni-icons>
            </view>
            <view class="answer-line"></view>
            <view class="tip-item" @tap="toExerciseErrorQuestions">
              <text class="label">错题</text>
              <text class="num">{{ selectedBaseExerciseProcess?.errorCount }} </text>
              <uni-icons class="right" type="right" color="#8d8d8d" size="20"
                v-if="(selectedBaseExerciseProcess?.errorCount || 0) > 0"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      <!-- 试卷-列表 -->
      <view class="panel list-item-panel" v-for="(item, index) in selectedBase?.classesItems" :key="index">
        <view class="list-item-left">
          <view class="list-item-left-title">
            <text class="title-index">
              试卷{{ index + 1 }}
            </text>
            <text class="title-label">
              {{ item.name }}
            </text>
          </view>
          <view class="list-item-left-process">
            <uv-line-progress class="u-process"
              :percentage="useSelectedBaseClassesExerciseProcess(item.questionIds!)?.count" :showText="false"
              inactiveColor="#FAF1E5" activeColor="#BF8657" height="9rpx"></uv-line-progress>
            <view class="process-text">{{ useSelectedBaseClassesExerciseProcess(item.questionIds!)?.count }}/{{
              item.questionIds?.length }}</view>
          </view>
        </view>
        <view class="right" @tap="toExercise(item.code!)">
          去练题
        </view>
      </view>
      <view class="panel list-item-panel mock-panel ">
        <view class="list-item-left">
          <view class="list-item-left-title">
            <text class="title-index">
              模考
            </text>
            <text class="title-label">
              考前测试
            </text>
          </view>
          <view class="list-item-mock">
            高度还原真实考场规则
          </view>
        </view>
        <view class="right" @tap="toMockRealExam">
          去考试
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, computed } from 'vue'
  import uvLineProgress from '@climblee/uv-ui/components/uv-line-progress/uv-line-progress.vue'
  import { useSelectedBase } from '@/composables/LearnBase'
  import { useSelectedBaseExerciseProcess, useSelectedBaseClassesExerciseProcess } from '@/composables/Exercise'
  import { ExerciseTypeEnum } from '@/api/constants'

  // #ifdef MP-TOUTIAO
  // 获取小程序下胶囊按钮的布局位置信息
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const statusBarHeight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif
  const { safeAreaInsets } = uni.getSystemInfoSync()
  const safeAreaInsetsBottom = ref((safeAreaInsets?.bottom ? safeAreaInsets?.bottom : 0) * 2.5 + 'px')
  const baseType = ref<string>()

  onLoad(async (options: any) => {
    baseType.value = options.baseType
  })

  // 精选题库
  const selectedBase = computed(() => useSelectedBase(baseType.value!).value)
  // 精选题库练习进度
  const selectedBaseExerciseProcess = computed(() => useSelectedBaseExerciseProcess(selectedBase.value!))

  // 根据题库类型获取题库名称
  const getBaseTypeName = (baseType: string) => {
    if (baseType === 'km1') {
      return '科目一'
    }
    else if (baseType === 'km4') {
      return '科目四'
    }
  }
  // 去练习
  const toExercise = (code: number) => {
    uni.navigateTo({
      url: `/pagesExercise/answer/answer?exerciseType=${ExerciseTypeEnum.SelectedBaseExercise}&baseType=${baseType.value}&code=${code}`
    })
  }

  // 去练习未练习的试题
  const toExerciseNoExerciseQuestions = () => {
    if (selectedBaseExerciseProcess.value!.noExerciseCount <= selectedBaseExerciseProcess.value!.count) {
      uni.navigateTo({
        url: `/pagesExercise/answer/answer?exerciseType=${ExerciseTypeEnum.SelectedBaseNoExercise}&baseType=${baseType.value}`
      })
    }
  }
  // 去练习错题
  const toExerciseErrorQuestions = () => {
    if (selectedBaseExerciseProcess?.value!.errorCount > 0) {
      uni.navigateTo({
        url: `/pagesExercise/answer/answer?exerciseType=${ExerciseTypeEnum.SelectedBaseErrorQuestionsExercise}&baseType=${baseType.value}`
      })
    }

  }

  // 去真实考场模拟考试
  const toMockRealExam = () => {
    uni.navigateTo({
      url: `/pagesExam/mockRealExam/mockRealExam?baseType=${baseType.value}`
    })
  }

  //退出
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .viewport {
    background-repeat: no-repeat;
    background-image: url("https://media.jiabl.net.cn/miniapp/images/select_question_bg.png");
    background-size: 100% auto;
    background-color: #f7f7f7;
  }

  .uni-nav-bar {
    .icon-arrow-left {
      font-weight: bold;
    }

    .title {
      align-self: center;
      flex: 1;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .toutiao-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(statusBarHeight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      // justify-content: center;
      height: v-bind(titleHeight);

      .title {
        margin-left: 82rpx;
        font-size: 16px;
        // font-weight: bold;
      }
    }
  }

  /* #endif */

  .scroll-view {
    display: flex;
    flex-direction: column;
    padding: 0rpx 30rpx;

  }

  .panel {
    padding: 40rpx;
    background-color: #fff;
    border-radius: 19rpx;
  }

  // 学习-进度
  .process-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 105rpx;
    margin-bottom: 42rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold
    }

    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 38rpx;

      .process {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 22rpx;
        width: 334rpx;
        height: 152rpx;
        background-color: #f7f7f7;
        border-radius: 19rpx;

        .count {
          font-size: 42rpx;
          color: #5b5b5b;

        }

        .answer-count {
          font-size: 54rpx;
          color: #000;
        }

        .tip {
          margin-top: 10rpx;
          font-size: 26rpx;
          color: #696969;

        }
      }

      .answer-tips {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: space-between;
        margin-left: 72rpx;
        flex: 1;
        font-size: 26rpx;
        color: #7a7a7a;

        .tip-item {
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding-left: 20rpx;

          .label {
            width: 100rpx;
          }

          .num {
            flex: 1;
            font-size: 42rpx;
            color: #000;
          }

          .right {
            padding-left: 20rpx;
            text-align: right;
          }

        }

        .answer-line {
          margin: 10rpx 14rpx 10rpx 0rpx;

          height: 2rpx;
          background-color: #e3e3e3;
        }
      }
    }
  }

  // 试卷-列表
  .list-item-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .list-item-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;

      .list-item-left-title {
        display: flex;
        flex-direction: row;
        align-items: center;

        .title-index {
          margin-right: 10rpx;
          width: 106rpx;
          height: 48rpx;
          background-color: #ffeddf;
          border-radius: 6rpx 6rpx 39rpx 6rpx;
          font-size: 28rpx;
          text-align: center;
          line-height: 48rpx;
        }

        .title-label {
          font-size: 34rpx;
          font-weight: bold;
        }
      }

      .list-item-left-process {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-top: 20rpx;

        .process-text {
          margin-left: 20rpx;
          font-size: 26rpx;
          color: #c18657;
        }
      }

      .list-item-mock {
        margin-top: 20rpx;
        font-size: 27rpx;
        color: #696969;
      }


    }

    .right {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 40rpx;
      width: 162rpx;
      height: 63rpx;
      background-color: #feeddd;
      border-radius: 32rpx;
      font-size: 28rpx;
      color: #953f32;

    }
  }

  // 模考
  .mock-panel {
    margin-bottom: v-bind(safeAreaInsetsBottom);
  }

</style>
